<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/cssreset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
 <script type="text/javascript">
        $(function () {
            //得到焦点
            $("#password").focus(function () {
                $("#left_hand").animate({
                    left: "150",
                    top: " -38"
                }, {
                    step: function () {
                        if (parseInt($("#left_hand").css("left")) > 140) {
                            $("#left_hand").attr("class", "left_hand");
                        }
                    }
                }, 2000);
                $("#right_hand").animate({
                    right: "-64",
                    top: "-38px"
                }, {
                    step: function () {
                        if (parseInt($("#right_hand").css("right")) > -70) {
                            $("#right_hand").attr("class", "right_hand");
                        }
                    }
                }, 2000);
            });
            //失去焦点
            $("#password").blur(function () {
                $("#left_hand").attr("class", "init_left_hand");
                $("#left_hand").attr("style", "left:100px;top:-12px;");
                $("#right_hand").attr("class", "init_right_hand");
                $("#right_hand").attr("style", "right:-112px;top:-12px");
            });
        });
    </script>
<body>
<div class="top"></div>
<div class="login_content">
    <div class="login_cat">
        <div class="tou"></div>
        <div class="init_left_hand" id="left_hand"></div>
        <div class="init_right_hand" id="right_hand"></div>
    </div>
    <p class="p_name">
        <span class="u_logo"></span>
            <input type="text" class="ipt" value=""  placeholder="请输入用户名或邮箱"  />

    </p>
    <p class="p_pass">
        <span class="p_logo"></span>
            <input type="password" id="password" class="ipt" value=""  placeholder="请输入密码"  />
    </p>
    <div class="p_button">
        <p class="p_content">
            <span class="fl">
            <a href="#">忘记密码?</a>
                </span>
            <span class="fr">
                <a  href="#">注册</a>
                <a href="#" class="bt">登录</a>
            </span>
        </p>
    </div>

</div>
</body>
</html>